<template>
	<view class="page">
		<p style="text-align: left;">欢迎使用~</p>
		<p style="text-align: left; font-size: 30rpx;">用户注册</p>
		<view class="form">
			<view class="form-item">
				<view style="width: 100%;">
					<view class="form-title">
						<span class="iconfont icon-a-mti-4Gduijiangmti-eLTE"></span>手机号:
					</view>
					<input type="number" placeholder="请输入手机号" maxlength="11" 
						style="border-bottom: 1px solid #ddd;" v-model="phoneNum" autofocus />
				</view>
			</view>
			<view class="form-item">
				<view style="width: 100%;">
					<view class="form-title">
						<span class="iconfont icon-mti-shoukao"></span>密码:
					</view>
					<input type="password" placeholder="请输入密码" maxlength="11"
						style="border-bottom: 1px solid #ddd;" v-model="password" autofocus />
				</view>
			</view>
			<view class="form-item">
				<view style="width: 100%;">
					<view class="form-title">
						<span class="iconfont icon-mti-shoukao"></span>确认密码:
					</view>
					<input type="password" placeholder="请确认密码" maxlength="11"
						style="border-bottom: 1px solid #ddd;" v-model="confirmPassword" autofocus />
				</view>
			</view>
			<button class="register-btn" @tap="register">注册</button>
		</view>
	</view>
</template>

<script>
	import { registration } from "../../api/index.js"
	export default {
		data() {
			return {
				phoneNum: '',
				password: '',
				confirmPassword: ''
			}
		},
		methods: {
			register() {
				//组合数据
				let obj = {
					phoneNum: this.phoneNum,
					password: this.password,
					confirmPassword: this.confirmPassword
				}
				console.log(obj);
				//判断输入是否为空
				if (this.phoneNum.trim() === '' || this.password.trim() === '' || this.confirmPassword.trim() === '') {
					uni.showToast({
						title: '输入不能为空',
					});
					return
				}
				if (this.password === this.confirmPassword) {
					//提交路径
					registration(obj).then(res=>{
						if(res.data.status === 0){
							uni.showToast({ 
								title: '注册成功',
							})
							setTimeout(() => {
								//跳转登录页面
								uni.navigateTo({
									url: '/pages/login/login'
								})
							}, 800);
						}else{
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							});
						}
					})
				}

					// uni.request({
					// 	url: 'http://8.140.198.52:8001/api/webapi/reguser',
					// 	method: 'POST',
					// 	data: obj,
					// 	success: (res) => {
					// 		console.log(res, '注册成功');
					// 		uni.showToast({ 
					// 			title: '注册成功',
					// 		})
					// 		setTimeout(() => {
					// 			//跳转登录页面
					// 			uni.navigateTo({
					// 				url: '/pages/login/login'
					// 			})
					// 		}, 800);
					// 	}
					// });
				
				// }else{
				// 	uni.showToast({
				// 		title: '密码不一致',
				// 		icon: 'none'
				// 	});
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background: linear-gradient(#b2cfed, #ffff);
		width: 100%;
		height: 100vh
	}

	.form {
		padding: 30rpx;
		margin-top: 50rpx;

		.form-item {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			background: rgba(255, 255, 255, 0.8);
			padding: 20rpx;
			border-radius: 12rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);

			text {
				width: 160rpx;
				font-size: 28rpx;
				color: #333;
			}

			input {
				flex: 1;
				height: 60rpx;
				font-size: 28rpx;
				color: #666;
			}
		}
	}

	p {
		text-align: center;
		font-size: 36rpx;
		color: #333;
		font-weight: bold;
		padding: 40rpx 0;
	}

	.submit-btn {
		margin-top: 60rpx;
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		background: #4a90e2;
		color: #fff;
		font-size: 32rpx;
		border-radius: 40rpx;
		box-shadow: 0 4rpx 16rpx rgba(74, 144, 226, 0.3);

		&:active {
			transform: scale(0.98);
		}
	}
</style>